import { Steps } from "nextra/components";

# Installation

## Install Stackflow
<Steps>
### Installation
Install Stackflow in your React project with the following command.

```sh npm2yarn copy
npm install @stackflow/core @stackflow/react
```

### Initialize Stackflow
Create a JavaScript (or TypeScript) file in your project and call the `stackflow()` function to generate the `<Stack />` and `useFlow()` functions.

And export them so that `<Stack />` and `useFlow()` can be used in other components.

```ts showLineNumbers filename="stackflow.ts" copy
import { stackflow } from "@stackflow/react";

export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {},
  plugins: [],
});
```
</Steps>

## Extend with Basic UI

<Steps>
### Installation
**Stackflow** does not include UI (DOM and CSS) implementation by default. To achieve the desired rendering results, you need to add plugins. Install the `@stackflow/plugin-renderer-basic` plugin and the `@stackflow/plugin-basic-ui` extension with the following command.

```sh npm2yarn copy
npm install @stackflow/plugin-renderer-basic @stackflow/plugin-basic-ui
```

### Initialize UI Plugins
Initialize the `basicRendererPlugin()` from `@stackflow/plugin-renderer-basic` and the `basicUIPlugin()` from `@stackflow/plugin-basic-ui` in the `plugins` field of the `stackflow()` function as follows.

```ts showLineNumbers filename="stackflow.ts" copy {8-13}
import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";

export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {},
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});
```

### Include CSS
Also, include the CSS provided by `@stackflow/plugin-basic-ui` somewhere in your code.

```ts copy
import "@stackflow/plugin-basic-ui/index.css";
```

### Render the Stack Component
And initialize the `<Stack />` component at the desired rendering location as follows.

```tsx showLineNumbers filename="App.tsx" copy
import { Stack } from "./stackflow";

const App = () => {
  return (
    <div>
      <Stack />
    </div>
  );
};

export default App;
```
</Steps>
---

If you have completed up to this point, let's move on to learn how to register activities.
